<template>
    <div class="mv-list">
        <div class="container">
            <ul ref="mvList">
                <li v-for="(item,index) in list" :key="index">
                    <div class="mv-img" @click="toMvdetail(item.mv_mid)">
                      <img :src="item.mv_pic" alt="">
                      <div class="icon">
                        <span class="iconfont icon-bofang1"></span>
                      </div>
                    </div>
                    <div class="mv-name ellipsis">{{item.mv_name}}</div>
                    <div class="mv-uploader ellipsis">{{item.uploader_nick}}</div>
                    <div class="mv-play">
                      <span class="iconfont icon-tuya-"></span>
                      <span class="count">{{item.play_str}}</span>
                    </div>
                </li>
            </ul>
        </div>
      <span class="iconfont icon-jiantou4" @click="sliderTo(true)"></span>
      <span class="iconfont icon-jiantou-you" @click="sliderTo(false)"></span>
    </div>
</template>

<script>
    export default {
        name: "MvList",
        props:{
          list:Array
        },
        data(){
          return{
            ulPos:0,
            count:1,//计算当前滑动的位置
          }
        },
        methods:{
          toMvdetail(mid){
            this.$router.replace('/mvDetail/'+mid);
            location.reload()
          },
          sliderTo(bool){
            const page=Math.ceil(this.list.length/5);
            if(bool===false){//往右移动
              this.ulPos+=(-1200);
              this.$refs.mvList.style.transform=`translateX(${this.ulPos}px)`
              this.$refs.mvList.style.transition='all 1s'
              if(this.count!==page){
                  this.count++;
              }else{
                  this.$refs.mvList.style.transform=`translateX(0px)`
                  this.$refs.mvList.style.transition=''
                  this.ulPos=0;
                  this.count=1;
              }
            }else{
              this.ulPos+=(1200);
              this.$refs.mvList.style.transform=`translateX(${this.ulPos}px)`
              this.$refs.mvList.style.transition='all 1s'
              if(this.count!==1){
                this.count--;
              }else{
                this.ulPos=(page-1)*(-1200);
                this.$refs.mvList.style.transform=`translateX(${this.ulPos}px)`
                this.$refs.mvList.style.transition=''
                this.count=page;
              }
            }
          }
        }
    }
</script>

<style scoped lang="less">
.mv-list{
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
  .container{
    width: 1200px;
    margin: 0 auto;
    >ul{
      display: flex;
      flex-direction: row;
      >li{
        width: 224px;
        font-size: 14px;
        margin-right: 20px;
        &:nth-child(5n){
          margin-right: 0px;
        }
        .mv-img{
          height: 127px;
          width: 224px;
          position: relative;
          overflow: hidden;
          &:hover{
            &:after{
              content: '';
              display: block;
              width: 224px;
              height: 127px;
              position: absolute;
              top:0;
              left: 0;
              background: #000;
              opacity: 0.2;
              /*解决存在蒙层还能点击的问题*/
              pointer-events:none;
            }
            .icon{
              transform: scale(1.3);
              opacity: 1;
            }
            >img{
              transform: scale(1.2);
            }
          }
          >img{
            width: 100%;
            height: 100%;
            transition: all 0.6s;
          }
          .icon{
            position: absolute;
            margin: auto;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-radius:50%;
            width: 35px;
            height: 35px;
            opacity: 0;
            transition:  all 1s;
            .icon-bofang1{
              display: inline-block;
              font-size: 25px;
              margin-left: 7px;
              margin-top: 7px;
            }
          }
        }
        .mv-name{
          line-height: 1.5;
          &:hover{
            color: #31c27c;
            cursor: pointer;
          }
        }
        .mv-uploader{
          line-height: 1.5;
          &:hover{
            color: #31c27c;
            cursor: pointer;
          }
        }
        .mv-play{
          line-height: 1.5;
          color: #999;
        }
      }
    }
  }
  &:hover{
    >span{
      &.iconfont{
        opacity: 1;
      }
    }
  }
  >span{
    &.iconfont{
      display:block;
      height: 108px; /*尚未解决左右滑动的问题*/
      width: 68px;
      background: #efeeef;
      font-size: 40px;
      line-height: 108px;
      text-align: center;
      position: absolute;
      top:58px;
      opacity: 1;
      transition:all 1s;
      &.icon-jiantou4{
        left: -72px;
      }
      &.icon-jiantou-you{
        right:-72px;
        &:before{
          position: relative;
          left: -40px;
          padding-left: 54px;
        }
      }
    }
  }
}
</style>
